<template>
  <div class="left-chart-1">
    <div class="lc1-details">
      <div>
        人效：<span>{{ groupUserEffeciency }}标准箱/小时</span>
      </div>
      <div>
        当前班组：<span>{{ groupName }}</span>
      </div>
      <div>
        应到：<span>{{ arriveCount }}人</span>
      </div>
      <div>
        实到：<span>{{ signInCount }}人</span>
      </div>
      <div>
        接班时间：<span>{{ workStartTime }}</span>
      </div>
    </div>
    <dv-scroll-board v-if="config.data" :config="config" class="lc1-chart" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: "LeftChart1",
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    data: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      groupUserEffeciency: "",
      groupName: "",
      arriveCount: "",
      signInCount: "",
      workStartTime: "",
      config: {},
    };
  },
  methods: {},
  watch: {
    data: {
      handler(newVal) {
        let configdata = newVal?.data || [];
        configdata = configdata.map((ele) => [
          `<span class="text-wrap">${ele.workStationName}</span>`,
          `<span class="text-wrap">${ele.realname}</span>`,
        ]);

        this.config = {
          headerBGC: "#050f67",
          header: ["岗位/工位", "姓名"],
          data: configdata,
          index: false,
          rowNum: 5,
          // columnWidth: [],
          align: ["center", "center"],
          oddRowBGC: "#053a6d",
          evenRowBGC: "#091c56",
        };
        this.groupUserEffeciency = newVal?.groupUserEffeciency || "";
        this.groupName = newVal?.groupName || "";
        this.arriveCount = newVal?.arriveCount || "";
        this.signInCount = newVal?.signInCount || "";
        this.workStartTime = newVal?.workStartTime || "";
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 0;
  font-size: 15px;
  padding-top: 50px;

  .lc1-details {
    flex: 5;
    padding-left: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .lc1-chart {
    flex: 7;
  }
}
::v-deep {
  .text-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 14px;
    white-space: wrap;
  }
}
.no-data {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
